<template>

<div>
    <el-upload class="avatar-uploader"
               action="api/upload"
               v-show="false"
               :headers="headers"
               :show-file-list="false"
               :on-success="handlePreview">
    </el-upload>
    <quill-editor
            class="ql-editor"
            v-model="content"
            ref="myQuillEditor"
            @change="onEditorChange($event)"
            :options="editorOption">
    </quill-editor>
</div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import * as Quill from 'quill'
import { quillEditor } from 'vue-quill-editor'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)
import {Message} from "element-ui";
// https://blog.csdn.net/qq_33444716/article/details/122377336  https://www.freesion.com/article/1488483705/  https://www.jianshu.com/p/efcedcabb192
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
    ['blockquote', 'code-block'], //引用，代码块
    [{'header': 1}, {'header': 2}], // 标题，键值对的形式；1、2表示字体大小
    [{'list': 'ordered'}, {'list': 'bullet'}], //列表
    [{'script': 'sub'}, {'script': 'super'}], // 上下标
    [{'indent': '-1'}, {'indent': '+1'}], // 缩进
    [{'direction': 'rtl'}], // 文本方向
    [{'size': ['small', false, 'large', 'huge']}], // 字体大小
    [{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
    [{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
    [{'font': []}], //字体
    [{'align': []}], //对齐方式
    ['clean'], //清除字体样式
    ['image'] //上传图片、上传视频
  ]
export default {
  components: {
    quillEditor
  },
  props: {
    msg: {
        type: [Number, Object, Array, String],
        default: ''
    }
  },
  data() {
    return {
        headers: {
            //上传文件的请求头
            Authorization: this.$store.state.token
        },
        content: this.msg, 
        editorOption: {
          modules:{
            toolbar: {
              container: toolbarOptions,
              handlers: {
                'image': function(value){
                  if(value){
                    //alert('点击了图片上传')
                      document.querySelector('.avatar-uploader input').click()
                  }else{
                    this.quill.format('image',false)
                  }
                }
              }
            },
            imageResize: {
               displayStyles: {
                  backgroundColor: 'black',
                  border: 'none',
                  color: 'white'
               },
               modules: ['Resize', 'DisplaySize', 'Toolbar']
            },
          },
          placeholder: "输入内容..."
        },
    }
  },
    watch:{
        msg:{
            handler(newVal){
                this.content = newVal
            },
            deep: true
        }
    },
    methods: {
      handlePreview(response, file, fileList) {
          let res = response.data.ulr
          let quill = this.$refs.myQuillEditor.quill
          // 如果上传成功返回图片URL
          if (res) {
              // 获取光标所在位置
              let length = quill.getSelection().index;
              // 插入图片，res为服务器返回的图片链接地址
              quill.insertEmbed(length, 'image', res)
              // 调整光标到最后
              quill.setSelection(length + 1)
          } else {
              // 提示信息，需引入Message
              Message.error('图片插入失败')
          }

      },
      onEditorChange() {
          let content = this.content
          this.$emit('update:msg',content);
      },
  }
}
</script>